<template>
  <div class="searchBtnList-list">

    <el-form v-if="props.params && !(!isSearchBtn&&!isResetBtn&&!isAddBtn)" ref="params" :model="props.params"
             :inline="true" :label-width="labelWidth"
             label-position="left"
    >
      <slot name="params" :params="props.params" :onSearch="onSearch"/>
      <el-form-item>
        <!--          <el-button @click="getDataList">刷新</el-button>
                  <el-button @click="onReset">重置</el-button>
                  <el-button v-if="isSearchBtn" type="primary" @click="onSearch">查询</el-button>
                  <el-button v-if="isAddBtn" type="primary" @click="onAdd">新增</el-button>-->
        <el-button v-if="isSearchBtn" @click="onSearch">搜索</el-button>
        <el-button v-if="isResetBtn" @click="onReset">重置</el-button>
        <el-button v-if="isAddBtn" @click="onAdd">新增</el-button>
        <slot name="button"/>
      </el-form-item>
    </el-form>

    <div class="flex-c-sb" style="align-items: flex-start;">
      <div>
        <el-radio-group v-if="props.radioParams" v-model="radioVal" class="my_radio_group"
                        @change="onSearch" style="margin-bottom: 15px;"
        >
          <el-radio v-for="(item,index) in props.radioParams.radioList" :key="index" :label="item.val">
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </div>
      <div>
        <slot name="batchButton"/>
      </div>
    </div>


    <slot name="middle"/>

    <div v-loading="loading">
      <el-table
          v-if="isTable"
          ref="table"
          :data="dataList"
          border
          @selection-change="handleSelectionChange"
          row-key="id"
          lazy
          :load="load"
          :tree-props="childrenList"
      >
        <slot name="data" :onEdit="onEdit" :onDel="onDel"/>
      </el-table>
      <template v-else>
        <div class="list">
          <slot v-for="(row,index) in dataList" name="data" :row="row" :index="index"/>
        </div>
        <div v-if="!dataList.length" class="not_data">
          暂无数据
        </div>
      </template>

      <el-pagination
          :current-page.sync="pageParams.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageParams.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  /**
   * props
   * apiModule 接口模块
   * apiListName 默认list
   * params 分页搜索参数
   * timeParams 分页搜索日期范围条件参数
   * radioParams 分页搜索单选条件
   * isAddBtn 是否需要添加按钮 默认true
   * isSearchBtn 是否需要添加查询按钮 默认true
   * labelWidth 搜索参数label宽 默认70
   * onReset 清空特殊参数方法
   * pageSize 每页数量 默认10
   * height 表格高度 默认650
   * isAuto 初次加载获取数据 默认true
   * parseData 解析列表数据方法
   * isTable 是否表格 默认true
   * selectList 多选
   * childrenList 是否多级表格
   */
  export default {
    props: {
      props: Object
    },
    data() {
      return {
        loading: false,
        pageParams: {
          pageNo: 1,
          pageSize: 10
        },
        radioVal: '',
        dataList: [],
        total: 0,
        resData: {}
      }
    },
    computed: {
      apiListName() {
        return this.props.apiListName || 'list'
      },
      labelWidth() {
        return (this.props.labelWidth || 70) + 'px'
      },
      height() {
        return this.props.height || 650
      },
      isTable() {
        if (this.props.isTable === undefined) {
          return true
        } else {
          return this.props.isTable
        }
      },
      isSearchBtn() {
        if (this.props.isSearchBtn === undefined) {
          return true
        } else {
          return this.props.isSearchBtn
        }
      },
      isResetBtn() {
        if (this.props.isResetBtn === undefined) {
          return true
        } else {
          return this.props.isResetBtn
        }
      },
      isAddBtn() {
        if (this.props.isAddBtn === undefined) {
          return true
        } else {
          return this.props.isAddBtn
        }
      },
      isAuto() {
        if (this.props.isAuto === undefined) {
          return true
        } else {
          return this.props.isAuto
        }
      },
      childrenList() {
        if (this.props.childrenList === undefined) {
          return {}
        } else {
          return this.props.childrenList
        }
      }
    },
    mounted() {
      if (this.props.pageSize && this.props.pageSize !== this.pageParams.pageSize) {
        this.pageParams.pageSize = this.props.pageSize
      }
      this.isAuto && this.getDataList()
    },
    methods: {
      onAdd() {
        this.$parent.addEditRow = null
        this.$parent.addEditVisible = true
      },
      onEdit(data) {
        this.$parent.addEditRow = data
        this.$parent.addEditVisible = true
      },
      onDel(data) {
        this.props.apiModule.del(data.id).then(res => {
          this.getDataList()
          this.$notify({
            title: '成功',
            message: `删除成功`,
            type: 'success'
          })
        })
      },
      handleSelectionChange(val) {
        this.props.selectList = val
      },
      handleSizeChange(val) {
        this.pageParams.pageNo = 1
        this.pageParams.pageSize = val
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.getDataList()
      },
      onSearch() {
        this.pageParams.pageNo = 1
        this.getDataList()
      },
      onReset() {
        this.$refs.params.resetFields()
        if (this.props.timeParams && this.props.timeParams.length) {
          this.props.timeParams.forEach(item => {
            item.dateList = []
          })
        }
        if (this.props.onReset) {
          this.props.onReset()
        }
        this.onSearch()
      },
      load(tree, treeNode, resolve) {
        if (this.props.load) {
          this.props.load(tree, treeNode, resolve)
        }
      },
      getParams() {
        let params = { ...this.props.params, ...this.pageParams }
        if (this.props.timeParams && this.props.timeParams.length) {
          this.props.timeParams.forEach(item => {
            if (item.dateList && item.dateList.length) {
              params[item.startTimeName] = item.dateList[0] + ' 00:00:00'
              params[item.endTimeName] = item.dateList[1] + ' 23:59:59'
            }
          })
        }
        if (this.props.radioParams) {
          params[this.props.radioParams.paramsName] = this.radioVal
        }
        return params
      },
      getDataList() {
        if (!this.loading) {
          this.loading = true
          this.props.apiModule[this.apiListName](this.getParams()).then(res => {
            if (this.props.parseData) {
              this.dataList = this.props.parseData(res)
            } else {
              this.dataList = res.data.records
            }
            if (this.props.getTotal) {
              this.total = this.props.getTotal(res)
            } else {
              this.total = res.data.total
            }
            this.resData = res.data
            this.loading = false
            this.$refs.table.bodyWrapper.scrollTop = 0
          }).catch(() => {
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .my_radio_group {

    .el-radio {
      .el-radio__input {
        display: none;
      }

      .el-radio__label {
        padding: 0 10px;
        position: relative;

        &:after {
          position: absolute;
          left: 0;
          bottom: -5px;
          content: "";
          width: 100%;
          height: 2px;
        }
      }

      &.is-checked {
        .el-radio__label {
          &:after {
            background-color: #409EFF;
          }
        }
      }
    }
  }

  .el-pagination {
    margin-top: 15px;
  }

  .not_data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    font-size: 14px;
    color: #909399;
  }

  .searchBtnList {

  }

  .searchBtnList-list {
    ::v-deep .el-cascader--medium {
      width: 185px !important;
    }
  }
</style>
